import React, { useState, useEffect } from 'react';
import {
  Form,
  Button,
  Table,
  Modal,
  Space,
  Checkbox,
  notification,
} from 'antd';
import { SelectOutlined, EyeFilled } from '@ant-design/icons';
import { transFormIndex, componentsMap, goBack } from '@/utils/util';
import API from '@/api/cyindex.js';
import FileList from '@/components/FileLists';

const safetyIncidentNoticeCheck = ({ history }) => {
  const [AQSJTB_SJLX, setAQSJTB_SJLX] = useState([]);
  const [press, setPress] = useState([]);
  const receiverList = {};
  const [SJLY, setSJLY] = useState([]);
  const [JJCD, setJJCD] = useState([]);
  const [form] = Form.useForm();
  const disposeState = { 0: '未处置', 1: '已处置' };
  const [dataSource, setDataSource] = useState([]);
  const [checkBoxValues, setCheckBoxValues] = useState([]);
  const [fileList, setFileList] = useState([]);
  const [cuiban, setCuiban] = useState([]);
  const [pagination, setPagination] = useState({
    pageSize: 10, //每条的页数
    current: 1,
    showQuickJumper: true,
  });
  const TableList = [
    {
      label: '通报函号',
      name: 'reportId',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '事件来源',
      name: 'eventSource',
      type: 'select',
      otherProps: {
        disabled: true,
        options: SJLY,
      },
    },
    {
      label: '事件类型',
      name: 'eventType',
      type: 'select',
      otherProps: {
        disabled: true,
        options: AQSJTB_SJLX,
      },
    },
    {
      label: '紧急程度',
      name: 'emergency',
      type: 'select',
      otherProps: {
        disabled: true,
        options: JJCD,
      },
    },
    {
      label: '接收单位',
      name: 'receiverName',
      type: 'input',
      otherProps: {
        disabled: true,
      },
      isremark: true,
    },
    {
      label: '备注说明',
      name: 'adress',
      type: 'textarea',
      otherProps: {
        disabled: true,
      },
      isremark: true,
    },
  ];
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '单位名称',
      dataIndex: 'receiverName',
      align: 'center',
    },
    {
      title: '处置状态',
      dataIndex: 'disposestate',
      align: 'center',
    },
    {
      title: '处置人',
      dataIndex: 'disUserName',
      align: 'center',
    },
    {
      title: '处置时间',
      dataIndex: 'updateTime',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (text, r) => (
        <div>
          <Button
            type="link"
            icon={<EyeFilled />}
            className="table-icon"
            onClick={checkLink.bind(null, r)}
          ></Button>
        </div>
      ),
    },
  ];
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    if (press.length == 0) {
      notification.error({
        message: '请选择需要催办的单位',
      });
      return;
    } else {
      setIsModalVisible(true);
    }
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const handleOk = () => {
    if (checkBoxValues.length == 0) {
      notification.error({
        message: '请选择需要催办的方式',
      });
      return;
    }
    let type = '';
    if (checkBoxValues.length == '2') {
      type = '3';
    } else {
      type = checkBoxValues[0];
    }
    const result = cuiban.snfileList.map((item) => {
      return {
        fileName: item.fileName,
        originalFileName: item.originalFileName,
      };
    });
    const params = {
      id: cuiban.id,
      userName: cuiban.userName,
      reportId: cuiban.reportId,
      press: press.join(','),
      type: type,
      snfileList: result,
    };
    setIsModalVisible(false);
    setPress([]);
    API.cuiBanJtt(params).then((res) => {
      initList();
      if (res) {
        notification.success({
          message: '催办成功',
        });
      }
    });
  };

  const rowSelection = {
    columnWidth: 80, // 表格多选框的大小
    selectedRowKeys: press,
    onChange: onSelectChange,
    getCheckboxProps: (record) => ({
      disabled:
        record.disposeState != 0 || (record.disposeState == 0 && !record.sfcb),
    }),
  };

  function onSelectChange(selectedRowKey) {
    setPress(selectedRowKey);
  }
  //选择催办的方式
  function onChange(values) {
    setCheckBoxValues(values);
  }

  const pageSizeChange = (page) => {
    setPagination({ ...page });
  };
  const checkLink = (x) => {
    x.tid = JSON.parse(history.location.query.r).id;
    const xx = JSON.stringify(x);
    history.push({
      pathname: '/networkInfor/safetyIncidentNotice/check_after',
      query: { xx },
    });
  };
  function initList() {
    API.showServiceProviderList()
      .then((res) => {
        if (res) {
          res.t.map((item) => {
            receiverList[item.id] = item.name;
          });
        }
      })
      .then(() => {
        API.dictItemList()
          .then((res) => {
            const JJCDList = [];
            const SJLYList = [];
            const AQSJTB_SJLXList = [];
            if (res) {
              res.t.map((item) => {
                if (item.dictCode == 'JJCD') {
                  JJCDList.push({
                    label: item.dictItemName,
                    value: item.dictItemType,
                  });
                }
                if (item.dictCode == 'SJLY') {
                  SJLYList.push({
                    label: item.dictItemName,
                    value: item.dictItemType,
                  });
                }
                if (item.dictCode == 'AQSJTB_SJLX') {
                  AQSJTB_SJLXList.push({
                    label: item.dictItemName,
                    value: item.dictItemType,
                  });
                }
              });
              setJJCD(JJCDList);
              setSJLY(SJLYList);
              setAQSJTB_SJLX(AQSJTB_SJLXList);
            }
          })
          .then(() => {
            const xx = JSON.parse(history.location.query.r);
            API.showJjt({ id: xx.id, receverId: xx.rId }).then((res) => {
              if (res) {
                setCuiban(res.t);
                form.setFieldsValue(res.t);
                const result = res.t.securityDisposeList.map((item) => {
                  return {
                    ...item,
                    receiverName: receiverList[item.receiverId],
                    disposestate: disposeState[item.disposeState],
                  };
                });
                setFileList(res.t.snfileList);
                setDataSource(result);
              }
            });
          });
      });
  }
  useEffect(() => {
    initList();
  }, []);
  return (
    <div className="main-x">
      <Form form={form}>
        <div className="base-title">安全事件信息</div>
        <div className="ant-form-inline form-x bgf">
          {TableList.map((item) => {
            return (
              <Form.Item
                key={item.name}
                label={item.label}
                name={item.name}
                disabled={item.disabled}
                className={item.isremark ? 'block' : ''}
              >
                {componentsMap(item.type, item.otherProps, true)}
              </Form.Item>
            );
          })}
          <Form.Item label="附件信息" className="block">
            {
              <FileList
                fileList={fileList}
                downloadUrl="/notification/dispose/download"
              />
            }
          </Form.Item>
        </div>
        <div className="base-title mt20">处置情况</div>
        <div className="main-x bgf">
          {JSON.parse(history.location.query.r).reportState == 0 ? (
            ''
          ) : (
            <div className="tools-x">
              <Button
                type="link"
                icon={<SelectOutlined />}
                className="btn-icon"
                onClick={showModal}
              >
                一键催办
              </Button>
              <Modal
                title="请选择催办方式"
                visible={isModalVisible}
                onCancel={handleCancel}
                onOk={handleOk}
                destroyOnClose={true}
              >
                <div className="modal">
                  <Checkbox.Group onChange={onChange}>
                    <Checkbox value="1">站内信</Checkbox>
                    <Checkbox value="2" disabled={true}>
                      短信
                    </Checkbox>
                  </Checkbox.Group>
                </div>
              </Modal>
            </div>
          )}
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataSource}
            rowKey="id"
            pagination={pagination}
            className="custom-table"
            onChange={pageSizeChange}
          ></Table>
        </div>
        <div className="footer-x">
          <Space className="btns" size={18}>
            <Button type="primary" className="cancel-btn" onClick={goBack}>
              返回
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
};
export default safetyIncidentNoticeCheck;
